DGit UI
Quiet, sharp React components for dashboards and sign-in screens, as a shadcn registry. shadcn add copies the source into your project, so you own it and can change it. React, Tailwind CSS v4, Radix UI, and lucide icons; MIT licensed.
Install
Add the registry to components.json, then add what you need:
{
"registries": {
"@dgit": "https://ui.dgit.co/r/{name}.json"
}
}npx shadcn add @dgit/theme @dgit/use-theme @dgit/account-menu @dgit/app-headerComponents and blocks
- Theme: Neutral gray scale (light and dark), shadcn's color names on it, type scale, menu animation. Import after Tailwind.
- useTheme: System, light or dark, kept in localStorage and applied as <html data-theme>. Includes the first-paint script.
- Docs: Docs pages as HTML strings, no framework: Markdown with Mintlify's components (Steps, Accordion, callouts, Card, Frame, Columns, Tabs, CodeGroup, Icon, Tooltip), lucide icons under Font Awesome's names, the side menu, On this page, previous/next, search (a JSON index, no service), llms.txt, and the styles as strings and as docs.css.
- Button: Pill buttons, 40px tall by default.
- Menu: A floating panel from a trigger: 12px corners, 36px rows, grows from the trigger. No positioning library.
- Account menu: Avatar button and menu: name and email, a system/light/dark switch, your links, log out.
- Page: PageHeader, Section, List (rounded rows), Notice, and ago() for relative times.
- Copy: CopyButton and CopyField (a monospace value with a copy button).
- Segmented: Two or three choices in one small pill.
- Status pill: Pill chip with a round icon well; status color only on the icon.
- Sliding tabs: Filter tabs where one white pill glides to the chosen tab. Arrow keys work.
- Date strip: Pick a day; only the chosen day floats as a card.
- Tour: First-run tip card joined to a toolbar, plus a get-started checklist.
- Swatch palette: Color grid with a plus to add your own.
- App header: Dashboard top bar: brand, pill navigation, and a slot for the account menu.
- Sidebar layout: Dashboard with a sidebar: drill-in groups and route layers that slide in with a back row, a top bar with a scope switcher and breadcrumbs, a drawer on phones.
- Sign-in page: Centered 384px column, 30px title, stacked 40px pill choices, code field and code boxes, 'Signing in to <app>'.
- Sign-in flow: Neotax's sign-in, monochrome: email, then a lookup picks the step (6-digit code, password, passkey, Google-only, create account, two-step, forgot password). Server calls are props; Korean or English strings.
- Marketing: For landing and product pages only: glass nav, hero, gradient stage with window frame, feature tiles, review wall, FAQ, article cards, dot band, footer, reveal. App screens stay monochrome.